<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>商品大模块</title>
		<link rel="stylesheet" href="./css/商品大模块.css">
		<link rel="stylesheet" href="css/base_transform.css">
		<link rel="stylesheet" href="./css/商品小li.css">
		<link rel="stylesheet" href="./css/浏览更多.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css"/>
		
	</head>
	<body>
		<!-- 一个元素的块 -->
		<div class="boxd_hd_main clearfix">
			<div class="boxd_hd_main_left_1 ">
				<ul class="main_left_ul ">
					<li class="main_left_li">
						<a href="#" class="main_left_img_a clearfix">
							<img class="main_left_img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b99bcb716c8f76e1fc5475172bdfc27.jpg?thumb=1&w=176&h=461&f=webp&q=90">
						</a>
					</li>
				</ul>
			</div>
			<!-- 右边 -->
			<div class="boxd_hd_main_right">
				<div class="main_right_box clearfix">
					<ul class="main_right_box_ul  clearfix">
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						
						<!-- 商品 小个的 -->
						<li class=" main_right_li_items">
							<a href="#" class="main_right_li_items_a clearfix">
								<div class="items_left">
									<h3 class="items_title">Redmi显示器23.8英寸</h3> 
									<p class="item_price">
										<span class="normal_price">599</span>
									</p>
								</div>
								<div class="items_right">
									<img class="items_right_img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7c37478d8b3b553ba0a50adaec2fc775.png?thumb=1&w=125&h=125&f=webp&q=90"  >
								</div>
							</a>
						</li>
						<!-- 浏览更多 单页ul 看情况 添加一个 -->
						<li class=" main_right_li_items_bottom ">
							<a href="#" class="main_right_li_items_bottom_a clearfix">
								<div class="items_left_bottom">
									<h3 class="items_title_bottom">浏览更多</h3> 
									<p class="item_content_bottom">热门</p>
								</div>
								<div class="items_right_bottom">
									<img class="items_right_img_bottom" src="../images/arrowright.svg"  >
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 右边结束 -->
		</div>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>

		<!-- 两个元素的块 begin-->
		<div class="boxd_hd_main">
			<!-- 两个元素的块 左边-->
			<div class="boxd_hd_main_left_2 clearfix">
				<ul class="main_left_ul_2 ">
					<li class="main_left_li_2">
						<a href="#" class="main_left_img_a_2 clearfix">
							<img class="main_left_img_2" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d47879ec183e25a36e67e0219636e60.jpg?thumb=1&w=234&h=300&f=webp&q=90">
						</a>
					</li>
					<li class="main_left_li_2">
						<a href="#" class="main_left_img_a_2 clearfix">
							<img class="main_left_img_2" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d47879ec183e25a36e67e0219636e60.jpg?thumb=1&w=234&h=300&f=webp&q=90">
						</a>
					</li>
				</ul>
			</div>
			<!-- 两个元素的块 右边-->
			<div class="boxd_hd_main_right ">
				<div class="main_right_box clearfix">
					<ul class="main_right_box_ul  clearfix">
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						
						
						<!-- 商品 小个的 -->
						<li class=" main_right_li_items">
							<a href="#" class="main_right_li_items_a clearfix">
								<div class="items_left">
									<h3 class="items_title">Redmi显示器23.8英寸</h3> 
									<p class="item_price">
										<span class="normal_price">599</span>
									</p>
								</div>
								<div class="items_right">
									<img class="items_right_img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7c37478d8b3b553ba0a50adaec2fc775.png?thumb=1&w=125&h=125&f=webp&q=90"  >
								</div>
							</a>
						</li>
						<!-- 浏览更多 单页ul 看情况 添加一个 -->
						<li class=" main_right_li_items_bottom">
							<a href="#" class="main_right_li_items_bottom_a clearfix">
								<div class="items_left_bottom">
									<h3 class="items_title_bottom">浏览更多</h3> 
									<p class="item_content_bottom">热门</p>
								</div>
								<div class="items_right_bottom">
									<img class="items_right_img_bottom" src="../images/arrowright.svg"  >
								</div>
							</a>
						</li>
					</ul>
					<ul class="main_right_box_ul  clearfix">
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						<li class="box_right_li">
							<a href="#" class="box_right_a clearfix">
								<img class="box_right_a_img" src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90" alt="">
								<div class="box_right_a_deta">
									<h3 class="box_right_atitle">title</h3>
									<p class="box_right_content">box_right_content</p>
									<p class="box_right_price">
										<span class="box_right_new_price">1999</span><span class="box_right_old_price">2999</span>
									</p>
								</div>
							</a>
						</li>
						
						<!-- 商品 小个的 -->
						<li class=" main_right_li_items">
							<a href="#" class="main_right_li_items_a clearfix">
								<div class="items_left">
									<h3 class="items_title">Redmi显示器23.8英寸</h3> 
									<p class="item_price">
										<span class="normal_price">599</span>
									</p>
								</div>
								<div class="items_right">
									<img class="items_right_img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7c37478d8b3b553ba0a50adaec2fc775.png?thumb=1&w=125&h=125&f=webp&q=90"  >
								</div>
							</a>
						</li>
						<!-- 浏览更多 单页ul 看情况 添加一个 -->
						<li class=" main_right_li_items_bottom">
							<a href="#" class="main_right_li_items_bottom_a clearfix">
								<div class="items_left_bottom">
									<h3 class="items_title_bottom">浏览更多</h3> 
									<p class="item_content_bottom">热门</p>
								</div>
								<div class="items_right_bottom">
									<img class="items_right_img_bottom" src="../images/arrowright.svg"  >
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 右边结束 -->
			
		</div>
		<!-- 两个元素的块 end-->
		
	</body>
</html>
